<template>
    <div class="main-box-right">
        <el-dialog
        :title=" operateType"
        :visible.sync="isShow"
        >
        <template v-if="operateType === '剪裁图片'">
             <imagecropper  v-if="isShow" @getimage="getimage" :getUserinfo="getUserinfo" :userinfo="userinfo" />
              <div slot="footer" class="dialog-footer">
                <el-button size="medium" type="primary" @click="edithead">上传</el-button>
                <el-button size="medium" @click="isShow = false">取消</el-button>
              </div>
        </template>
        <template v-if="operateType !== '剪裁图片'">
          <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              >
              <template v-if="formname ==='email'||formname ==='delemail'">
                <el-button type="primary" @click="sendcode" ref="sendCode" :disabled="disabled">{{time}}</el-button>
              </template>
              </common-form>
               <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
        </template>
      </el-dialog>
                <div class="main-box-right-top">
                    <h2>{{title}}</h2>
                    <p>账户信息</p>
                    <div class="main-box-right-part">
                        <p>头像</p>
                        <img :src="userinfo.avatar?userinfo.avatar:'#'" class="head-img" width="60px" height="60px" >
                        <!-- <input type="file" ref="file" v-show="false" name="file" accept="image/*" @change="modifyHeadimg"> -->
                        <button @click="modifyHeadimg">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>昵称</p>
                        <span>{{userinfo.userNickname}}</span>
                        <button @click="editUsername">修改</button>
                    </div>
                     <div class="main-box-right-part">
                        <p>性别</p>
                        <span>{{userinfo.userSex}}</span>
                        <button @click="editsex">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>个人简历</p>
                        <span class="introduction">{{userinfo.introduction}}</span>
                        <button @click="editIntroduction">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>邮箱</p>
                        <span>{{userinfo.userEmail}}</span>
                        <button v-if="userinfo.userEmail !=='未绑定'" @click="delemail">解绑</button>
                        <button v-if="userinfo.userEmail ==='未绑定'" @click="editemail">绑定</button>
                    </div>
                     <div class="main-box-right-part">
                        <p>密码</p>
                        <span>*********</span>
                        <button @click="editpassword">修改</button>
                    </div>
                </div>
    </div>
</template>

<script>
import {getuserInfo} from '../../../api/personalData/information/editInformation'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import {editHeadimg,editUserinfo,editPassword,bindingEmail,unbindEmail,sendCode} from '../../../api/personalData/information/editInformation'
import CommonForm from '@/components/ly/Common/CommonForm'
import imagecropper from '@/components/ly/Common/imagecropper'
export default {
    name:'Information',
    components:{CommonForm,imagecropper},
    data() {
      return {
        userid:'',
        title:'',
        formname:'',
        isShow:false,
        operateType:'修改信息',
        operateFormlabel:[],
        operateForm:{
        },
        personaldata:[],
        code:'',
        time:'发送验证码',
        num:60,
        disabled:false,
        userinfo:{},
        files:""
      }
    },
    mounted(){
      const path = this.$route.path
      if(path === '/shoppersonal/information'){
        this.title='店铺信息'
      }else{
        this.title='个人信息'
      }
    },
    methods:{
      // 获取剪裁的文件
      getimage(data){
        console.log(data);
        this.files = data
      },
      // 修改头像
      edithead(){
        if(this.files === ''){
          this.$message({
            type: "warning",
            message: "没有剪裁!"
          })
        }else{
        const formdata = new FormData();
        formdata.append("file", this.files);
        editHeadimg({userId:this.userinfo.userId},formdata).then(data =>{
          const list = data.data.message
              console.log(list);
              if(list === '成功'){
                 this.getUserinfo();
                  this.isShow = false
                  this.$message({
                        type: "success",
                        message: "修改头像成功!"
                    })
                    console.log(data);
              }
        })
        //  this.$http({
        //         url:'/shops/user/update/updateUserAvatar',
        //         method:'PUT',
        //         data:formdata,
        //         params:{
        //           userId:this.userinfo.userId
        //         },
        //         maxContentLength:Infinity,
        //         maxRedirects:5,
        //         maxBodyLength:Infinity,
        //         headers: { 'Authorization': cookie.getToken() }
        //     }).then(data => {
        //       const list = data.data.message
        //       console.log(list);
        //       if(list === '成功'){
        //          this.getUserinfo();
        //         this.isShow = false
        //           this.$message({
        //                 type: "success",
        //                 message: "修改头像成功!"
        //             })
        //             console.log(data);
        //       }
        //     }).catch(err => {
        //         console.log(err);
        //     })
        }
      },
      modifyHeadimg(){
        this.operateType = '剪裁图片'
        this.isShow = true
      },
      confirm(){
          if(this.formname === 'name' || this.formname === 'sex' || this.formname === 'introduction'){
            editUserinfo(this.operateForm).then(data=>{
              this.isShow = false
              this.$message({
                    type: "success",
                    message: "修改成功!"
                })
                this.getUserinfo();
            })
            // this.$http({
            //     url:'/shops/user/update/updateUserBasicMessage',
            //     method:'PUT',
            //     params:this.operateForm,
            //     headers: { 'Authorization': cookie.getToken() }
            // }).then(data => {
            //   this.isShow = false
            //   this.$message({
            //         type: "success",
            //         message: "修改成功!"
            //     })
            //     this.getUserinfo();

            //     console.log(data);
            // }).catch(err => {
            //     console.log(err);
            // })
          }else if(this.formname === 'password'){
            editPassword(this.operateForm).then(data=>{
              const list = data.data.message
              if(list === '成功'){
                 this.isShow=false
                 this.$message({
                    type: "success",
                    message: "修改成功!"
                })
                this.getUserinfo();
              }else{
                this.$message.error(list);
              }
                console.log(data);
            })
            // this.$http({
            //     url:'/shops/user/update/updateUserPassword',
            //     method:'PUT',
            //     params:this.operateForm,
            //     headers: { 'Authorization': cookie.getToken() }
            // }).then(data => {
            //   if(data.data.message === '成功'){
            //      this.isShow=false
            //      this.$message({
            //         type: "success",
            //         message: "修改成功!"
            //     })
            //     this.getUserinfo();
            //   }else{
            //     this.$message.error(data.data.message);
            //   }
            //     console.log(data);
            // }).catch(err => {
            //     console.log(err);
            // })
          }else if(this.formname === 'email'){
              bindingEmail(this.operateForm).then(data =>{
              const list =data.data.message
              if(list === '成功'){
                 this.isShow=false
                 this.$message({
                    type: "success",
                    message: "绑定成功!"
                })
                this.getUserinfo();
              }else{
                this.$message.error(list);
              }
            })
            //  this.$http({
            //     url:'/shops/user/update/bindingEmail',
            //     method:'PUT',
            //     params:this.operateForm,
            //     headers: { 'Authorization': cookie.getToken() }
            // }).then(data => {
            //   if(data.data.message === '成功'){
            //      this.isShow=false
            //      this.$message({
            //         type: "success",
            //         message: "绑定成功!"
            //     })
            //     this.getUserinfo();
            //   }else{
            //     this.$message.error(data.data.message);
            //   }
            //     console.log(data);
            // }).catch(err => {
            //     console.log(err);
            // })
          }else if(this.formname === 'delemail'){
            unbindEmail(this.operateForm).then(data =>{
              const list =data.data.message
              if(list === '成功'){
                 this.isShow=false
                 this.$message({
                    type: "success",
                    message: "解绑成功!"
                })
                this.getUserinfo();
              }else{
                this.$message.error(list);
              }
            })
          //    this.$http({
          //       url:'/shops//user/update/unBoundEmail',
          //       method:'PUT',
          //       params:this.operateForm,
          //       headers: { 'Authorization': cookie.getToken() }
          //   }).then(data => {
          //     if(data.data.message === '成功'){
          //        this.isShow=false
          //        this.$message({
          //           type: "success",
          //           message: "解绑成功!"
          //       })
          //       this.getUserinfo();
          //     }else{
          //       this.$message.error(data.data.message);
          //     }
          //       console.log(data);
          //   }).catch(err => {
          //       console.log(err);
          //   })
          }
      },
      editUsername(){
        this.operateType = '修改昵称'
        this.formname = 'name'
        this.isShow = true
        this.operateFormlabel =[
           {
            model:'userNickname',
            label:'姓名',
            type:'input',
            display:''
          },

        ]
        this.operateForm={
            userSex :this.userinfo.userSex,
            userNickname:this.userinfo.userNickname,
            introduction:this.userinfo.introduction,
            userId:this.userinfo.userId
        }
      },
      editsex(){
         this.operateType = '修改性别'
        this.formname ='sex'
        this.isShow=true
        this.operateFormlabel =[
           {
            model:'userSex',
            label:'性别',
            type:'select',
            display:'',
            opts:[
              {
                label:'男',
                value:'男'
              },
               {
                label:'女',
                value:'女'
              },
            ]
          },
        ]
         this.operateForm={
            userSex :this.userinfo.userSex,
            userNickname:this.userinfo.userNickname,
            introduction:this.userinfo.introduction,
            userId:this.userinfo.userId
        }
      },
      editIntroduction(){
         this.operateType = '修改个人介绍'
          this.formname ='introduction'
         this.isShow=true
        this.operateFormlabel =[
           {
            model:'introduction',
            label:'个人简介',
            type:'input',
            display:''
          },
        ]
          this.operateForm={
            userSex :this.userinfo.userSex,
            userNickname:this.userinfo.userNickname,
            introduction:this.userinfo.introduction,
            userId:this.userinfo.userId
        }
      },
      // 绑定邮箱
      editemail(){
        this.disabled=false
         this.time=`发送验证码`
        this.operateType='绑定邮箱'
        this.formname ='email'
        this.isShow=true
        this.operateFormlabel =[
           {
            model:'email',
            label:'邮箱',
            type:'input',
             display:''
          },
          {
            model:'code',
            label:'验证码',
            type:'input',
            display:''
          },
        ]
          this.operateForm={
            email :'',
            code:'',
            userId:this.userid
        }
      },
      // 解绑邮箱
      delemail(){
        this.disabled=false
         this.time=`发送验证码`
        this.operateType='解绑邮箱'
        this.formname ='delemail'
        this.isShow=true
        this.operateFormlabel =[
           {
            model:'email',
            label:'邮箱',
            type:'input',
             display:''
          },
          {
            model:'code',
            label:'验证码',
            type:'input',
            display:''
          },
        ]
          this.operateForm={
            email :'',
            code:'',
            userId:this.userid
        }
      },
      // 发送验证码
      sendcode(){
        sendCode({to:this.operateForm.email}).then(data=>{
             const list =data.data.message
              if(list ==='成功'){
               this.$message({
                    type: "success",
                    message: "发送成功!"
                })
                this.num=60
                this.disabled=true
                var timer = setInterval(()=>{
                  this.num--;
                  this.time=`还剩${this.num}秒`            
                  if(this.num==0){
                  this.time=`发送验证码`
                  this.disabled=false
                  clearInterval(timer);	
                  }
                  },1000);
                }else{
                  this.$message({
                    type: "error",
                    message: "邮箱格式错误!"
                })
                }
        })
        //  this.$http({
        //         url:'/shops/login_and_register/email/sendMailCode',
        //         method:'post',
        //         params:{
        //             to:this.operateForm.email
        //         },
        //         headers: { 'Authorization': cookie.getToken() }
        //     }).then(data => {

        //       const list =data.data.message
        //       if(list ==='成功'){
        //        this.$message({
        //             type: "success",
        //             message: "发送成功!"
        //         })
        //         this.num=60
        //         this.disabled=true
        //         var timer = setInterval(()=>{
        //           this.num--;
        //           this.time=`还剩${this.num}秒`            
        //           if(this.num==0){
        //           this.time=`发送验证码`
        //           this.disabled=false
        //           clearInterval(timer);	
        //           }
        //           },1000);
        //         }else{
        //           this.$message({
        //             type: "error",
        //             message: "邮箱格式错误!"
        //         })
        //         }
        //     }).catch(err => {
        //         console.log(err);
        //     })
      },
      // 修改密码
       editpassword(){
          this.formname ='password'
         this.isShow=true
        this.operateFormlabel =[
           {
            model:'oldPassword',
            label:'旧密码',
            type:'input',
             display:''
          },
          {
            model:'newPassword',
            label:'新密码',
            type:'input',
            display:''
          },
           {
            model:'rePassword',
            label:'重复密码',
            type:'input',
            display:''
          },
           {
            model:'userId',
            label:' ',
            type:'input',
            display:'none'
          },
        ]
         this.operateForm={
            oldPassword :'',
            newPassword:'',
            rePassword:'',
            userId:this.userid
        }
      },
      // 获取数据
      getUserinfo(){
        const user = jwtDecode(this.$store.state.store.token);
        this.userid = user.userId
         getuserInfo({userId:user.userId}).then(data=>{
            const list =data.data.data
             this.userinfo = list
             console.log('@@',list);
        })
      }
    },
    created(){
      this.getUserinfo();
    }
}
</script>

<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
  button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            height: 40px;
            width: 82px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
          }
.main-box-right {
      margin-left: 20px;
      float: left;
      width: 900px;
      border-radius: 4px;
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      position: relative;
      .main-box-right-top {
        width: 100%;
        // height: 90px;
        h2 {
          margin-top: 10px;
          font-weight: 400;
          padding: 12px 30px;
          font-size: 20px;
        }
        p {
          font-size: 14px;
          padding-left: 32px;
          margin-bottom: 20px;
          color: #838383;
        }
        .main-box-right-part {
          width: 90%;
          height: 90px;
          margin: 0 auto;
          border-top: 1px solid #d6d6d6;
          position: relative;
          p {
            width: 103px;
            display: inline-block;
            text-align: right;
            line-height: 90px;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            &::after {
              content: "";
              height: 100%;
              padding-right: 30px;
              border-right: 2px solid #d6d6d6;
            }
          }
          span {
            margin-left: 30px;
            font-size: 12px;
            color: #666666;
            line-height: 40px;
          }
          .introduction{
            display: inline-block;
            max-width: 500px;
            // height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            float: right;
            height: 40px;
            width: 82px;
            cursor: pointer;
            margin-top: 20px;
            line-height: 40px;
            text-align: center;
          }
          .head-img {
            position: absolute;
            top: 20px;
            left: 170px;
            border-radius:50% ;
          }
        }
      }
    }
</style>